<template>
  <div class="Details" @click="chux">
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="ele in 4" :key="ele">
        <img :src="swip.img" />
      </van-swipe-item>
    </van-swipe>
    <div class="title2">
      <p class="dis2">{{swip.dis}}</p>
      <p class="name2">{{swip.name}}</p>
      <div class="pricebox">
        <span class="price2">{{swip.price}}</span>
        <span class="delprice">{{swip.delprice}}</span>
      </div>
    </div>
    <!-- 促销 -->
    <div class="chuxiao" @click.stop="chuxiao">
      <div class="baoyou" style="margin-bottom: 0.15rem">
        <span class="span1">满包邮</span>
        <span>在线支付满129免运费（部分地区除外）；</span>
      </div>
      <div class="song">
        <span class="span1">买就送</span>
        <span>订购可获0.34快乐币可抵0.34元</span>
      </div>
      <van-action-sheet v-model="show" title="促销">
        <p @click.stop="chux" style="min-height: 9rem;">
          <i>
            <div class="baoyou" style="border:1px solid #f5f5f5;height:1rem;line-height:1rem">
              <span class="span1">满包邮</span>
              <span>在线支付满129免运费（部分地区除外）；</span>
            </div>
            <div class="song" style="border:1px solid #f5f5f5;height:1rem;line-height:1rem">
              <span class="span1">买就送</span>
              <span>订购可获0.34快乐币可抵0.34元</span>
            </div>
            <div></div>
          </i>
        </p>
      </van-action-sheet>
    </div>
    <!-- 退货 -->
    <div class="label-box clearfloat" @click="zhengpin">
      <div class="label-main fl">
        <span>
          <img src="../img/correct_ico.png" />发货&amp;售后
        </span>
        <span>
          <img src="../img/correct_ico.png" />支付方式
        </span>
        <span>
          <img src="../img/correct_ico.png" />退货政策
        </span>
      </div>
      <div class="ell fl">...</div>
      <div class="label-arrow fr">
        <img src="../img/arrow_right.png" />
      </div>
      <van-action-sheet v-model="show2" title="快乐购保证">
        <p style="min-height: 11rem;">
          <i>
            <ul>
              <li style="border:1px solid #f5f5f5;padding:0.3rem 0.5rem;overflow: hidden;">
                <p style="float:left;width:100%;text-align: left">
                  <i style="color:#EF2F2F;font-size: 18px;float:left;margin-right:0.2rem">•</i>发货&售后
                </p>
                <p
                  style="color: #969696;padding-top: 5px;float:left;margin-left:0.3rem"
                >本商品由快乐购发货并提供售后服务</p>
              </li>
              <li style="border:1px solid #f5f5f5;padding:0.3rem 0.5rem;overflow: hidden;">
                <p style="float:left;width:100%;text-align: left">
                  <i style="color:#EF2F2F;font-size: 18px;float:left;margin-right:0.2rem">•</i>支付方式
                </p>
                <p
                  style="color: #969696;padding-top: 5px;float:left;margin-left:0.3rem"
                >该商品支持货到付款，请放心购买</p>
              </li>
              <li style="border:1px solid #f5f5f5;padding:0.3rem 0.5rem;overflow: hidden;">
                <p style="float:left;width:100%;text-align: left">
                  <i style="color:#EF2F2F;font-size: 18px;float:left;margin-right:0.2rem">•</i>退货政策
                </p>
                <p
                  style="color: #969696;padding-top: 5px;float:left;margin-left:0.3rem;text-align: left"
                >普通会员享受15天，VIP享30天无理由退货，厂家发货商品按国家政策执行</p>
              </li>
              <li style="border:1px solid #f5f5f5;padding:0.3rem 0.5rem;overflow: hidden;">
                <p style="float:left;width:100%;text-align: left">
                  <i style="color:#EF2F2F;font-size: 18px;float:left;margin-right:0.2rem">•</i>全天客服
                </p>
                <p
                  style="color: #969696;padding-top: 5px;float:left;margin-left:0.3rem"
                >售后无忧 专业客服全天守候</p>
              </li>
              <li style="border:1px solid #f5f5f5;padding:0.3rem 0.5rem;overflow: hidden;">
                <p style="float:left;width:100%;text-align: left">
                  <i style="color:#EF2F2F;font-size: 18px;float:left;margin-right:0.2rem">•</i>正品行货
                </p>
                <p
                  style="color: #969696;padding-top: 5px;float:left;margin-left:0.3rem"
                >QC严选 原厂严选 购的放心</p>
              </li>
            </ul>
          </i>
        </p>
      </van-action-sheet>
    </div>
    <!-- 规格 -->
    <div class="guige">
      <span style="font-size:14px;text-align: left;float:left;margin:0.2rem">规格</span>
      <img
        src="../img/arrow_right.png"
        style="width: auto; height: 0.9em;float:right;font-size:14px;height:0.9em;margin:0.25rem 0.1rem"
      />
      <span style="font-size:14px;text-align: left;float:right;margin:0.2rem">默认</span>
    </div>

    <van-stepper v-model="value" min="1" max="8" />
    <!--   底部加入购物车   -->

    <div class="addcart">
      <van-goods-action>
        <van-goods-action-icon icon="wap-home-o" text="首页" @click="home" />
        <van-goods-action-icon icon="shopping-cart-o" :info="totalNum" text="购物车" @click="cart" />
        <van-goods-action-button color="#DF2946" type="warning" text="加入购物车" @click="addcart" />
        <van-goods-action-button color="#C31F3A" type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      show2: false,
      show3: false,
      round: false,
      value: 1,
      goodinf: {},
      swip: []
    };
  },
  computed: {
    totalNum() {
      // window.console.log("购物车总数量");

      return this.$store.getters.total;
    }
  },
  methods: {
    onClickIcon() {
      // Toast("点击图标");
    },
    onClickButton() {
      // Toast("点击按钮");
    },
    chuxiao() {
      //点击弹出
      this.show = !this.show;
    },
    chux() {
      //收回弹窗
      this.show = false;
    },
    zhengpin() {
      this.show2 = !this.show2;
    },
    home() {
      //点击跳转到首页
      this.$router.push({ name: "home" });
    },
    cart() {
      //跳转到购物车
      this.$router.push({ name: "cart" });
      
    },
    async getdata(id) {
      //获取gid=xx商品信息
      let { data } = await this.$axios.get("http://localhost:5555/listbo/checkgood", {
        params: {
          id
        }
      });
      this.goodinf = data[0];
      window.console.log(this.goodinf.kucun);
    },
    async verify() {
      //contex就是store   == this.$store.commit
      let token = localStorage.getItem("token");
      if (token) {
        let { data } = await this.$axios.get(
          "http://localhost:5555/listbo/verify",
          {
            params: { token }
          }
        );
        if (data.type) {
          //验证成功，加入购物车
          // console.log(this.$route.query.price.substring(1)*1);

          let good = {
            gid: this.$route.query.id *1,
            cname: this.$route.query.cname,
            img: this.$route.query.img,
            name: this.$route.query.name,
            dis: this.$route.query.dis,
            price: this.$route.query.price.substring(1) * 1,
            kucun: this.goodinf.kucun,
            num: this.value,
            uid: localStorage.getItem("user") * 1,
            isok2:this.$route.query.isok2
          };
          console.log(good);
          
          this.$store.dispatch("additem", good); //添加商品数据
        } else {
          //失败
          alert("登录超时，请重新登录");
          this.$router.push("/login");
        }
      } else {
        alert("请登录");
        this.$router.push("/login");
      }
    },

    addcart() {
      //点击加入购物车
      this.verify();
    }
  },
  watch: {
    //监听数据变化，数量最小是1，最大不超过库存量
    num(value) {
      if (value <= 1) {
        this.value = 1;
      }
      if (value >= this.goodinf.kucun) {
        this.value = this.goodinf.kucun; //最大值
      }
    }
  },
  created() {
    this.swip = this.$route.query;
    this.getdata(this.swip.id * 1)
    // console.log(this.swip.id * 1);
  }
};
</script>
<style >
* {
  margin: 0;
  padding: 0;
}
.Details {
  background: white;
}
.van-swipe-item {
  width: 375%;
}
.van-swipe-item img {
  width: 100%;
}
/*  */
.title2 {
  margin: 0 0.25rem;
  font-size: 15px;
  text-align: left;
  color: black;
}
.dis2 {
  font-size: 16px;
}
.name2 {
  color: #c31f3a;
  font-size: 14px;
  margin: 0.1rem 0;
}
.price2 {
  color: #c31f3a;
  font-size: 24px;
}
.delprice {
  color: #969696;
  text-decoration: line-through;
  font-size: 14px;
}
/* 促销 */
.chuxiao {
  height: 1.5rem;
  overflow: hidden;
  font-size: 15px;
  text-align: left;
  padding-left: 0.2rem;
  border-top: 1px solid #f5f5f5;
  margin: 0.3rem;
}
.baoyou .span1,
.song .span1 {
  color: #df0010;
  display: inline-block;
  font-size: 12px;
  border: 1px solid #df0010;
  border-radius: 2px;
  line-height: 1.4em;
  padding: 0 2px;
  border-radius: 2px;
  margin-right: 5px;
  position: relative;
  top: -1px;
}
i {
  font-style: normal;
}
/* 退货 */
.label-box {
  padding: 8px 10px;
  background-color: #fafafa;
  position: relative;
  font-size: 14px;
  overflow: hidden;
}
.label-main {
  width: 21.3em;
  height: 1.5em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ell {
  width: 1em;
  margin-left: 5px;
}
.label-box span {
  display: inline-block;
  color: #5a5a5a;
  line-height: 1.5em;
  margin-right: 0.8em;
  font-size: 0.857em;
}
.label-box span img {
  width: 1em;
  vertical-align: top;
  margin-right: 3px;
  margin-top: 0.1em;
}
.label-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  height: 0.9em;
  margin-top: -0.45em;
  color: #969696;
}
.label-arrow img {
  width: auto;
  height: 0.9em;
}
.fl {
  float: left;
}
.clearfloat {
  zoom: 1;
}
.guige {
  overflow: hidden;
  border-bottom: 0.2rem solid #f0f0f0;
}
.van-goods-action {
  position: relative;
  bottom: 0.8rem !important ;
}
.van-goods-action-button--last {
  margin-right: 5px;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.van-goods-action-button--first {
  margin-left: 5px;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
</style>